<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    用户名： <input type="text" name="username"> <br>
    密码： <input type="text" name="password"> <br>
    省份： <select name="" id="province"></select>
    城市：
    <select name="" id="city">
        <option value="">永州</option>
    </select>

    <br>
</body>
<script>
    window.onload = function () {
        // 当页面加载完毕后，执行此代码
        axios.get("http://localhost/province/ProvinceServlet")
            // then表示响应成功的回调
            .then(resp => {
                let provinces = resp.data;
                let str = '';
                for (let i = 0; i < provinces.length; i++) {
                    let p = provinces[i];
                    str += '<option>'+p.province+'</option>'
                }
                document.getElementById("province").innerHTML = str;
            })
            // catch表示失败的回调
            .catch(() =>{
                alert("请求失败")
            })

    }
</script>

<script>
    document.getElementById("province").onclick = function () {
        // 当页面加载完毕后，执行此代码
        axios.get("http://localhost/province/SelectServlet?city="+document.getElementById("province").value)
        // then表示响应成功的回调
            .then(resp => {
                let provinces = resp.data;
                let str = '';
                for (let i = 0; i < provinces.length; i++) {
                    let p = provinces[i];
                    str += '<option>'+p.city+'</option>'
                }
                document.getElementById("city").innerHTML = str;
            })
            // catch表示失败的回调
            .catch(() =>{
                alert("请求失败")
            })

    }
</script>

</html>
<!--
省份信息：数据库中 Province
    数据库数据准备好

java代码：
    1. 根据数据库表创建对应的实体类
    2. mapper：
        定义省份查询所有的功能
    3. service：
    4. servlet：
        List<Province> ->  json字符串 响应给前端
html：
    发送异步请求，获取响应的json字符串

留一个作业：
    城市列表
-->